<template>
  <div>
    <el-dialog
      :title="!dataForm.id ? $t('Common.Add') : $t('Common.Edit')"
      :close-on-click-modal="false"
      :visible.sync="visible"
    >
      <el-form
        :model="dataForm"
        :rules="dataRule"
        ref="dataForm"
        @keyup.enter.native="dataFormSubmit()"
        label-width="auto"
      >
        <el-form-item label="会员名称" prop="name">
          <el-input v-model="dataForm.name" placeholder="会员名称"></el-input>
        </el-form-item>

          <el-form-item label="会员折扣" prop="discount">
            <el-col :span="12">
            <el-input-number v-model="dataForm.discount" :min="1" :max="100" placeholder="享受折扣"></el-input-number>%
            </el-col>
          </el-form-item>

        <el-form-item label="是否需要支付" prop="payFlag">
          <el-radio-group v-model="dataForm.payFlag">
            <el-radio v-model="dataForm.payFlag" :label="1">是</el-radio>
            <el-radio v-model="dataForm.payFlag" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item v-if="dataForm.payFlag === 1" label="支付费用" prop="payAmount">
          <el-input v-model="dataForm.payAmount" placeholder="支付费用"></el-input>
        </el-form-item>
        <el-form-item label="积分购买" prop="payIntegral">
          <el-input v-model="dataForm.payIntegral" placeholder="积分兑换会员卡"></el-input>
        </el-form-item>
        <el-form-item label="是否可以储值" prop="payStored">
          <el-radio-group v-model="dataForm.payStored">
            <el-radio v-model="dataForm.payStored" :label="1">是</el-radio>
            <el-radio v-model="dataForm.payStored" :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="等级" prop="level">
          <el-input v-model="dataForm.level" placeholder="等级"></el-input>
        </el-form-item>
        <el-form-item label="自动续期" prop="level">
          <el-checkbox label="1" v-model="dataForm.renewal">充值自动续期: </el-checkbox>
          <el-input-number style="width: 150px" :min=0 v-model="dataForm.renewalDay" ></el-input-number>
          <span class="el-span">天</span>
        </el-form-item>
        <el-form-item label="积分设置" prop="level">
          <el-checkbox-group v-model="dataForm.integralTypes" >
            <el-form-item >
              <el-checkbox label="1">按积分金额积分: </el-checkbox>
              每消费
              <el-input-number style="width: 150px" v-model="dataForm.roomIntegral" ></el-input-number>
              <span class="el-span">元，积</span>
              <el-input-number style="width: 150px" v-model="dataForm.addRoomIntegral" ></el-input-number>
              <span class="el-span">分</span>
            </el-form-item>
            <el-form-item>
                <el-checkbox  label="2">按入住天数积分: </el-checkbox>
                <span class="el-span">每入住</span>
                <el-input-number style="width: 150px" v-model="dataForm.dayIntegral" ></el-input-number>
                <span class="el-span">天，积</span>
                <el-input-number style="width: 150px" v-model="dataForm.addDayIntegral" ></el-input-number>
                <span class="el-span">分</span>
            </el-form-item>
            <el-form-item>
                <el-checkbox  label="3">启用储值赠送: </el-checkbox>
                <span class="el-span">每充值</span>
                <el-input-number style="width: 150px" v-model="dataForm.rechargeIntegral" ></el-input-number>
                <span class="el-span">元，积</span>
                <el-input-number style="width: 150px" v-model="dataForm.addRechargeIntegral" ></el-input-number>
                <span class="el-span">分</span>
            </el-form-item>
            <el-form-item>
              <el-checkbox  label="4" >积分超过</el-checkbox>
              <el-input-number style="width: 150px" v-model="dataForm.upLevelIntegral" ></el-input-number>
              <span class="el-span">分</span>
              <el-select style="width:150px" v-model="dataForm.levelIdIntegral" placeholder="选择级别" @change = "selectLevel" @visible-change = "filterLevelList">
               <el-option v-for="item in levelList" :key="item.id" :label="item.name" :value="item.id"></el-option>
              </el-select>
              <span class="el-span">自动升级</span>
            </el-form-item>
            <el-form-item>
              <el-checkbox  label="5" >升级扣除相应积分，扣减相应积分为</el-checkbox>
              <el-input-number style="width: 150px" v-model="dataForm.subLevelIntegral" placeholder=""></el-input-number>
            </el-form-item>

          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="会员图标" prop="icon">
          <el-popover
            ref="vipIconListPopover"
            placement="bottom-start"
            trigger="click"
            popper-class="mod-menu__icon-popover"
          >
            <div class="mod-menu__icon-list">
              <el-button
                style="margin-left: 5px; margin-bottom: 5px"
                v-for="(item, index) in iconList"
                :key="index"
                @click="iconActiveHandle(item)"
                :class="{ 'is-active': item === dataForm.icon } "
              >
                <span :class="'vip-icon '+ item"></span>
              </el-button>
            </div>
            <el-button
              slot="reference"
            >
              <span v-if="dataForm.icon!=null && dataForm.icon != ''" :class="'vip-icon '+ dataForm.icon"></span>
              <span v-else class="el-icon-plus avatar-uploader-icon" ></span>
            </el-button>
          </el-popover>
        </el-form-item>
        <el-form-item label="卡片景图" prop="bgImage">


          <el-button  @click="uploadImagesDialog(2, dataForm.bgImage)"
          >
            <img v-if="dataForm.bgImage" :src="dataForm.bgImage" class="avatar" >
            <span v-else class="el-icon-plus avatar-uploader-icon" ></span>
          </el-button>
        </el-form-item>
        <el-form-item label="卡片描述" prop="content">
          <quill-editor
            style="height:200px"
            class="editor"
            v-model="dataForm.content"
            ref="myQuillEditor"
            :options="editorOption"
            @blur="onEditorBlur($event)"
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)"
          ></quill-editor>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="visible = false">{{ $t('Common.Cancel') }}</el-button>
        <el-button type="primary" @click="dataFormSubmit()">{{ $t('Common.Confirm') }}</el-button>
      </span>
    </el-dialog>
    <uploadImage ref="uploadImage" v-if="uploadImageVisible" :uploadType="uploadType" @handleSuccess="handleSuccess"></uploadImage>
  </div>
</template>
<style>
  .mod-menu__icon-popover{
    width: 500px;
  }
  .vip-button{
    margin-left: 5px;
    margin-right: 5px;
  }
</style>
<script>
import uploadImage from "./uploadimage";
export default {
  data() {
    return {
      uploadAction: "",
      visible: false,
      uploadImageVisible:false,
      uploadType:1,
      levelList:[],
      dataForm: {
        id: 0,
        name: "",
        icon: "",
        discount: "",
        bgImage: "",
        payIntegral: 0,
        orderby: 1,
        payStored: 0,
        level: 1,
        content: "",
        payFlag: 0,
        payAmount: "",
        integralTypes:[],
        renewal:false,
        renewalDay:1
      },
      iconList:new Array(17).fill('').map((f,i) => "icon-huiyuan" + (i === 0 ? "" : i)),
      editorOption: {
        placeholder: '请输入卡片描述信息'
      },
      dataRule: {
        name: [
          { required: true, message: "会员名称不能为空", trigger: "blur" }
        ],
        payAmount: [
          { required: true, message: "卡片支付费用不能为空", trigger: "blur" }
        ],
        icon: [{ required: true, message: "图标不能为空", trigger: "blur" }],
        level: [{ required: true, message: "等级不能为空", trigger: "blur" }]
      }
    };
  },
  components:{
    uploadImage
  },
  methods: {
    uploadImagesDialog(uploadType, url) {
      this.uploadType = uploadType
      this.uploadImageVisible = true;
      this.$nextTick(() => {
        this.$refs.uploadImage.init(uploadType);
      });
    },
    iconActiveHandle(item) {
      this.dataForm.icon = item;
    },
    init(id) {
      this.uploadAction = this.$http.adornUrl(
        `/sys/oss/upload?token=${this.$cookie.get("token")}`
      );

      this.dataForm.icon = "";
      this.dataForm.id = id || 0;
      this.visible = true;
      this.getLevelList();
      this.$nextTick(() => {
        this.$refs["dataForm"].resetFields();
        if (this.dataForm.id) {
          this.$http({
            url: this.$http.adornUrl(
              `/hotel/hotelmemberlevel/info/${this.dataForm.id}`
            ),
            method: "get",
            params: this.$http.adornParams()
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.dataForm = {
                ...data.hotelMemberLevel,
                integralTypes:[]
              }
              this.dataForm.integralTypes = data.hotelMemberLevel.integralTypes ? data.hotelMemberLevel.integralTypes.split(',') : [];
              this.dataForm.name = data.hotelMemberLevel.name;
              this.dataForm.icon = data.hotelMemberLevel.icon;
              this.dataForm.discount = data.hotelMemberLevel.discount * 100;
              this.dataForm.bgImage = data.hotelMemberLevel.bgImage;
              this.dataForm.orderby = data.hotelMemberLevel.orderby;
              this.dataForm.level = data.hotelMemberLevel.level;
              this.dataForm.payIntegral = data.hotelMemberLevel.payIntegral;
              this.dataForm.content = data.hotelMemberLevel.content;
              this.dataForm.payFlag = data.hotelMemberLevel.payFlag;
              this.dataForm.payStored = data.hotelMemberLevel.payStored;
              this.dataForm.payAmount = data.hotelMemberLevel.payAmount;
            }
          });
        }
      });
    },
    getLevelList() {
      this.$http({
        url: this.$http.adornUrl("/hotel/hotelmemberlevel/list"),
        method: "get",
        params: this.$http.adornParams({
          page: 0,
          limit: 20
        })
      }).then(({ data }) => {
          this.levelList = data.page.list;
      });
    },
    filterLevelList() {
      const level = this.dataForm.level;
      this.levelList = this.levelList.filter(l => l.level > level);
    },
    selectLevel(level) {
      if (this.dataForm.subLevelIntegral == null)
        this.dataForm.subLevelIntegral = level.payIntegral;
    },
    handleSuccess(fileUrl, uploadType) {
      if (uploadType === 1) {
        this.dataForm.icon = fileUrl;
      } else {
         this.dataForm.bgImage = fileUrl;
      }
    },
    // 表单提交
    dataFormSubmit() {
      this.$refs["dataForm"].validate(valid => {
        if (valid) {
          this.$http({
            url: this.$http.adornUrl(
              `/hotel/hotelmemberlevel/${!this.dataForm.id ? "save" : "update"}`
            ),
            method: "post",
            data: this.$http.adornData({
              ...this.dataForm,
              integralTypes: this.dataForm.integralTypes.filter(f =>f && f !== '' ).reduce((p, n) => {
                p += (n + ',')
                return p;
              },''),
              id: this.dataForm.id || undefined,
              name: this.dataForm.name,
              icon: this.dataForm.icon,
              discount: (this.dataForm.discount / 100.0).toFixed(2) ,
              orderby: this.dataForm.orderby,
              content: this.dataForm.content,
              level: this.dataForm.level,
              payIntegral: this.dataForm.payIntegral,
              bgImage: this.dataForm.bgImage,
              payFlag: this.dataForm.payFlag,
              payStored: this.dataForm.payStored,
              payAmount: this.dataForm.payAmount
            })
          }).then(({ data }) => {
            if (data && data.code === 0) {
              this.$message({
                message: "操作成功",
                type: "success",
                duration: 1500,
                onClose: () => {
                  this.visible = false;
                  this.$emit("refreshDataList");
                }
              });
            } else {
              this.$message.error(data.msg);
            }
          });
        }
      });
    },
    handleIconSuccess(res, file) {
      this.dataForm.icon = res.url;
    },
    beforeIconUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    },
    handleBgImageSuccess(res, file) {
      this.dataForm.bgImage = res.url;
    },
    onEditorBlur() {},
    onEditorFocus() {
      //获得焦点事件
    },
    onEditorChange() {
      //内容改变事件
    },
    beforeBgImageUpload(file) {
      const isJPG = file.type === "image/jpeg";
      const isLt2M = file.size / 1024 / 1024 < 2;

      if (!isJPG) {
        this.$message.error("上传头像图片只能是 JPG 格式!");
      }
      if (!isLt2M) {
        this.$message.error("上传头像图片大小不能超过 2MB!");
      }
      return isJPG && isLt2M;
    }
  }
};
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.el-icon-upload-cursor{
  font-size: 20px;
  line-height: 36px;
  cursor: pointer;
}
.avatar-uploader-icon {
  font-size: 20px;
  color: #8c939d;
  width: 20px;
  height: 20px;
  text-align: center;
}
.avatar {
  width: 148px;
  height: 148px;
  display: block;
}
</style>
<style lang="scss" scoped>
.el-dialog__wrapper /deep/ .el-dialog {
  width: 60%;
}
.el-checkbox-group /deep/ .el-form-item {
  margin-bottom: 5px;
}
@media only screen and (max-width: 1180px) {
  .el-dialog__wrapper /deep/ .el-dialog {
    width: 80%;
  }
}  
</style>
